import React, {Component} from 'react'
import {View} from '@tarojs/components'

import {getWeatherTemperature,getWeatherDressing,getWeather3D} from '../../../service/weather'

import './index.scss'

type PageStateProps = {}

type PageDispatchProps = {}

type PageOwnProps = {
  // isShowName: string,
}

type PageState = {
  weatherState: string
  weatherDateList: {},

  weatherTemp:string,
  weather: string
  tempMax: string
  tempMin: string

  WeatherRemake: string

}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface Weather {
  props: IProps;
}

class Weather extends Component<IProps, PageState> {
  constructor(props: IProps) {
    super(props)
    this.state = {
      weatherState: 'sunny',
      weatherTemp: '', // 实况温度
      weather: '' ,// 文字描述 晴
      tempMax: '', // 最低温
      tempMin: '', // 最高温
      WeatherRemake: '感冒易发期，外出适当调整衣物，注意多吃蔬菜水果，多喝热水，补充水分。',
      weatherDateList: {
        'sunny': {
          high: '高温26℃',
          low: '低温17℃',
          rad: '18',
          wind: '北风',
          data: '15日星期天',
          weather: '晴',
          style: {
            backgroundColor: '#88a3d7'
          }
        },
        'cloudy': {
          style: {
            backgroundColor: '#88a3d7'
          }
        },
        'rainy': {
          style: {
            backgroundColor: '#88a3d7'
          }
        },
        'rainbow': {
          style: {
            backgroundColor: '#377FF7'
          }
        },
        'stormy': {
          style: {
            backgroundColor: '#999999'
          }
        },
        'starry': {
          style: {
            backgroundColor: '#111'
          }
        },
      },
    }
  }

  componentDidMount() {
    this.loadData()
  }
  loadData() {
    this.getWeatherList()
    this.getWeatherDressingList()
    this.getWeather3DList()

  }
  async getWeatherList() {
    const res = await getWeatherTemperature()
    console.log(res);
    if(res.code === 1) {
      this.setState({
        weatherTemp: res.data.now.temp,
        weather:  res.data.now.text
      })
      this.belongCalendar(res.data.now.text)
    }
  }

  async getWeatherDressingList(){
    const res = await getWeatherDressing()
    console.log(res);
    if(res.code === 1) {
      this.setState({
        WeatherRemake: res.data.daily[0].text
      })
    }
  }

  async getWeather3DList() {
    const res = await getWeather3D()
    console.log(res);
    if(res.code === 1) {
      this.setState({
        tempMax: res.data.daily[0].tempMax,
        tempMin: res.data.daily[0].tempMin
      })
  }
  }

  belongCalendar(v:string) {
    let hours = new Date().getHours()
    if(hours>=18 || hours <= 6) {
      this.setState({
        weatherState: 'starry'
      })
    } else {
      let str = this.filterWeatherStatus(v)
      this.setState({
        weatherState: str
      })
    }
  }

  filterWeatherStatus = (val: string) => {
    switch (val) {
      case '晴':
        return 'sunny';
      case '多云':
        return 'cloudy';
      case '小雨':
        return 'rainy';
      case '雨转晴':
        return 'rainbow';
      case '雷雨':
        return 'stormy';
      case '夜晚' :
        return 'starry';
      default:
        return 'cloudy'
    }
  }



  render() {
    const {weatherState,weatherTemp,weather ,tempMin,tempMax,weatherDateList, WeatherRemake} = this.state
    // let {name, isOpened, selector, onPickerClose} = this.props
    return (
      <View>
        <View className='weather_wrap' style={weatherDateList[weatherState].style}>
          <View className='cloud_box'>
            <View className={weatherState} />
          </View>
          <View className='cloud_tip'>
            <View className='cloud_tip_rea'>武夷山市 | {weather}</View>
            <View className='cloud_tip_rad'><View
              className='tip_rad_span _span'
            >{weatherTemp}</View><View
              className='tip_rad_span'
            >℃</View></View>
            <View
              className='cloud_tip_lr'
            >低温 {tempMin}℃ | 高温 {tempMax}℃</View>
          </View>
          <View className='cloud_foot'>
            {WeatherRemake}
          </View>
        </View>
      </View>
    )
  }
}


export default Weather
